<template>
  <div class="bg-white rounded-xl shadow-sm p-6">
    <div 
      class="flex items-center justify-between mb-6 cursor-pointer"
      @click="toggleCollapse"
    >
      <div class="flex items-center">
        <div class="p-2 bg-blue-50 rounded-lg">
          <BookOpen class="h-6 w-6 text-blue-500" />
        </div>
        <h2 class="text-xl font-semibold text-gray-800 ml-3">操作说明</h2>
      </div>
      <button 
        class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
        :class="{ 'rotate-180': !isCollapsed }"
      >
        <ChevronDown class="h-5 w-5" />
      </button>
    </div>
    
    <div 
      class="prose max-w-none overflow-hidden transition-all duration-300"
      :class="{ 'h-0': isCollapsed }"
      :style="contentStyle"
    >
      <div ref="contentRef">
        <v-md-preview 
          :text="instructions"
          :image-base-url="imageBaseUrl"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { BookOpen, ChevronDown } from 'lucide-vue-next';

const props = defineProps({
  instructions: {
    type: String,
    required: true
  },
  imageBaseUrl: {
    type: String,
    default: ''
  }
});

const isCollapsed = ref(true);
const contentRef = ref(null);
const contentHeight = ref(0);

const contentStyle = computed(() => ({
  maxHeight: isCollapsed.value ? '0px' : `${contentHeight.value}px`,
  opacity: isCollapsed.value ? 0 : 1
}));

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

onMounted(() => {
  contentHeight.value = contentRef.value?.scrollHeight || 0;
});
</script>

<style scoped>
:deep(.prose) {
  max-width: none;
}

:deep(.prose h1) {
  margin-top: 0;
}

:deep(.prose img) {
  margin: 1rem 0;
  border-radius: 0.5rem;
}

/* 折叠按钮动画 */
button {
  transition: transform 0.3s ease;
}

/* 内容区域过渡动画 */
.prose {
  transition: all 0.3s ease-in-out;
}

/* 确保折叠时内容不可见 */
.h-0 {
  margin: 0;
  padding: 0;
}
</style> 